<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="container">
      <ul class="top">
        <!-- 基础模板 -->
        <li>
          <a href="javascript:;">首页</a>
          <ul class="sub">
            <li>
              <a href="javascript:;">
                <span>砂锅厨具</span>
                <img
                  src="https://yanxuan.nosdn.127.net/3102b963e7a3c74b9d2ae90e4380da65.png?quality=95&imageView"
                  alt=""
                />
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <script src="./axios.js"></script>
    <script>
      axios.defaults.baseURL = "http://ajax-api.itheima.net";
      async function getTitle() {
        // 获取一级标题
        const topRes = await axios.get("/api/category/top");
        // 利用一级标题的 id 获取所有的二级标题（只是维护了数组）
        const twoRes = topRes.data.data.map((item) => {
          return axios.get(`/api/category/sub?id=${item.id}`);
        });

        // 获取二级分类数据
        const twoTitle = await Promise.all(twoRes);
        // 遍历二级分类
        const htmlArr = twoTitle.map((item) => {
          const data = item.data.data;
          // console.log(data);
          return `
                <li>
                  <a href="javascript:;">${data.name}</a>
                  <ul class="sub">
                    ${data.children
                      .map((child) => {
                        return `
                        <li>
                          <a href="javascript:;">
                            <span>${child.name}</span>
                            <img
                              src="${child.picture}"
                              alt=""
                            />
                          </a>
                        </li>
                      `;
                      })
                      .join("")}
                  </ul>
                </li>
              `;
        });
        // console.log(htmlArr);
        document.querySelector(".top").innerHTML = htmlArr.join("");
      }

      getTitle();
    </script>
  </body>
</html>
